<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Airdrop Checker Plugin (Web3 Redesign)</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto+Mono:wght@400;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            margin: 0; 
        }

        .font-roboto-mono {
            font-family: 'Roboto Mono', monospace;
        }

        /* Custom scrollbar */
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #9ca3af; border-radius: 3px; }
        .dark ::-webkit-scrollbar-thumb { background: #4b5563; }
        /* Accent theme specific scrollbars can be added if needed */
        .accent-theme-web3 ::-webkit-scrollbar-thumb { background: #2563EB; }
        .accent-theme-cyberpunk ::-webkit-scrollbar-thumb { background: #00f0ff; }
        .accent-theme-forest ::-webkit-scrollbar-thumb { background: #4ade80; }
        .accent-theme-sunset ::-webkit-scrollbar-thumb { background: #FF8C00; }
        .accent-theme-oceanic ::-webkit-scrollbar-thumb { background: #20B2AA; }
        .accent-theme-minty ::-webkit-scrollbar-thumb { background: #66CDAA; } 
        .accent-theme-royalpurple ::-webkit-scrollbar-thumb { background: #9370DB; }
        .accent-theme-crimsongold ::-webkit-scrollbar-thumb { background: #FFD700; }
        .accent-theme-deepsea ::-webkit-scrollbar-thumb { background: #1E90FF; }


        /* Modal Wrapper Styles */
        #airdrop-plugin-wrapper {
            transition: opacity 0.25s ease-out, visibility 0.25s ease-out; 
        }
        #airdrop-plugin-wrapper.modal-hidden { opacity: 0; visibility: hidden; }
        #airdrop-plugin-wrapper.modal-visible { opacity: 1; visibility: visible; }


        /* Mobile slide-up animation for the modal itself */
        @media (max-width: 767px) {
            #airdrop-checker-modal.slide-up-mobile-active { transform: translateY(0%); }
            #airdrop-checker-modal {
                transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
                transform: translateY(100%); 
            }
        }
        /* Desktop fade-in animation for the modal itself */
        @media (min-width: 768px) {
            #airdrop-checker-modal.fade-in-desktop-active { opacity: 1; transform: scale(1) translateY(0); }
            #airdrop-checker-modal {
                transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
                opacity: 0;
                transform: scale(0.95) translateY(10px); 
            }
        }
        
        /* Countdown flip animation */
        .flip-animate-container { display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 38px; height: 38px; line-height: 38px; overflow: hidden; text-align: center; padding-left: 0.25rem; padding-right: 0.25rem;}
        .flip-animate { display: inline-block; animation: flipVertical 0.5s ease-in-out; }
        @keyframes flipVertical { 0% { transform: perspective(150px) rotateX(0deg); opacity: 1; } 49% { transform: perspective(150px) rotateX(90deg); opacity: 0; } 50% { transform: perspective(150px) rotateX(-90deg); opacity: 0; } 100% { transform: perspective(150px) rotateX(0deg); opacity: 1; } }

        .pulse-indicator { animation: pulseIndicator 1.8s infinite cubic-bezier(0.4, 0, 0.6, 1); }
        @keyframes pulseIndicator { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.25); } }
        .loader { border-width: 3px; border-style: solid; border-radius: 50%; width: 20px; height: 20px; animation: spin 0.8s linear infinite; margin-right: 8px; /* Added margin for spacing */ }
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        .float-gift { animation: floatGift 2.8s ease-in-out infinite; }
        @keyframes floatGift { 0% {transform: translateY(0px);} 50% {transform: translateY(-15px);} 100% {transform: translateY(0px);} }
        .particles-success { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; overflow: hidden; z-index: 0; }
        .particle { position: absolute; width: 7px; height: 7px; border-radius: 50%; opacity: 0; animation: particle-effect 2s ease-out forwards; }
        @keyframes particle-effect { 0% { transform: translate(var(--start-x), var(--start-y)) scale(0.2); opacity: 0; } 20% { opacity: 1; transform: scale(1.3); } 100% { transform: translate(var(--end-x), var(--end-y)) scale(0.1); opacity: 0; } }
        .timeline-node::before { content: ''; position: absolute; left: 50%; top: -4px; transform: translateX(-50%); width: 14px; height: 14px; border-radius: 50%; border: 3px solid; background-color: var(--bg-surface); /* Changed to CSS var */ z-index: 2; transition: all 0.3s ease; }
        .timeline-node.active::before { width: 18px; height: 18px; top: -6px; animation: pulseNode 1.5s infinite; }
        .timeline-node.completed::before { background-color: currentColor; }
        .timeline-connector { position: absolute; top: 2px; left: calc(16.66% + 10px); right: calc(16.66% + 10px); height: 3px; z-index: 1; border-radius: 2px; }
        @keyframes pulseNode { 0% { box-shadow: 0 0 0 0px var(--pulse-node-color-alpha); } 50% { box-shadow: 0 0 0 6px var(--pulse-node-color-alpha); } 100% { box-shadow: 0 0 0 0px var(--pulse-node-color-alpha); } }
        
        .card-shadow { box-shadow: 0 10px 25px -5px var(--card-shadow-color-1, rgba(0,0,0,0.1)), 0 8px 10px -6px var(--card-shadow-color-2, rgba(0,0,0,0.1)); }
        .dark .card-shadow { box-shadow: 0 10px 25px -5px var(--card-shadow-color-1-dark, rgba(0,0,0,0.3)), 0 8px 10px -6px var(--card-shadow-color-2-dark, rgba(0,0,0,0.3)); }


        #loading-overlay { transition: opacity 0.3s ease-in-out; }
        #timeline-status-section.hidden-for-result { display: none !important; }

    </style>
    <script>
        // Tailwind config with multiple themes
        tailwind.config = {
            darkMode: 'class', 
            theme: {
                extend: {
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                        'roboto-mono': ['Roboto Mono', 'monospace'],
                    },
                    colors: {
                        // Base colors for light/dark mode (applied globally)
                        'page-bg': { light: '#F3F4F6', dark: '#0B1120' }, 
                        'surface-bg': { light: '#FFFFFF', dark: '#1F2937' }, 
                        'text-color': { light: '#111827', dark: '#F3F4F6' }, 
                        'secondary-text-color': { light: '#4B5563', dark: '#9CA3AF' }, 
                        'border-color': { light: '#E5E7EB', dark: '#374151' }, 
                        'loader-border-generic': { light: '#E5E7EB', dark: '#4B5563'}, 
                        'disabled-bg': { light: '#F3F4F6', dark: '#374151' }, 
                        'disabled-text': { light: '#9CA3AF', dark: '#6B7280' },

                        // Accent Themes
                        'theme-web3': {
                            primary: { DEFAULT: '#2563EB', rgb: '37, 99, 235', textOn: '#FFFFFF', shadow: 'rgba(37,99,235,0.3)' },
                            secondary: { DEFAULT: 'rgba(224, 231, 255, 0.7)', textOn: '#1E3A8A' }, // Lighter blue, with opacity
                            success: { DEFAULT: '#10B981', particle: '#34D399', textOn: '#FFFFFF', shadow: 'rgba(16,185,129,0.3)' },
                            error: { DEFAULT: '#EF4444', textOn: '#FFFFFF', shadow: 'rgba(239,68,68,0.3)' },
                            warning: { DEFAULT: '#F59E0B', textOn: '#1F2937', shadow: 'rgba(245,158,11,0.3)' },
                            loaderTop: { DEFAULT: '#2563EB' }
                        },
                        'theme-cyberpunk': {
                            primary: { DEFAULT: '#00F0FF', rgb: '0, 240, 255', textOn: '#0C0C1A', shadow: 'rgba(0,240,255,0.4)' },
                            secondary: { DEFAULT: 'rgba(61, 61, 126, 0.7)', textOn: '#E0E0FF' }, 
                            success: { DEFAULT: '#00FF7F', particle: '#00FF7F', textOn: '#0C0C1A', shadow: 'rgba(0,255,127,0.4)' },
                            error: { DEFAULT: '#FF4D4D', textOn: '#FFFFFF', shadow: 'rgba(255,77,77,0.4)' },
                            warning: { DEFAULT: '#FFD700', textOn: '#0C0C1A', shadow: 'rgba(255,215,0,0.4)' },
                            loaderTop: { DEFAULT: '#00F0FF' }
                        },
                        'theme-forest': {
                            primary: { DEFAULT: '#228B22', rgb: '34, 139, 34', textOn: '#FFFFFF', shadow: 'rgba(34,139,34,0.3)' },
                            secondary: { DEFAULT: 'rgba(233, 245, 233, 0.7)', textOn: '#166534' }, 
                            success: { DEFAULT: '#34D399', particle: '#34D399', textOn: '#064E3B', shadow: 'rgba(52,211,153,0.3)' }, 
                            error: { DEFAULT: '#DC2626', textOn: '#FFFFFF', shadow: 'rgba(220,38,38,0.3)' }, 
                            warning: { DEFAULT: '#FACC15', textOn: '#422006', shadow: 'rgba(250,204,21,0.3)' }, 
                            loaderTop: { DEFAULT: '#228B22' }
                        },
                        'theme-sunset': {
                            primary: { DEFAULT: '#F97316', rgb: '249, 115, 22', textOn: '#FFFFFF', shadow: 'rgba(249,115,22,0.3)' }, 
                            secondary: { DEFAULT: 'rgba(255, 247, 237, 0.7)', textOn: '#C2410C' }, 
                            success: { DEFAULT: '#EA580C', particle: '#FDBA74', textOn: '#FFFFFF', shadow: 'rgba(234,88,12,0.3)' }, 
                            error: { DEFAULT: '#BE123C', textOn: '#FFFFFF', shadow: 'rgba(190,18,60,0.3)' }, 
                            warning: { DEFAULT: '#F59E0B', textOn: '#451A03', shadow: 'rgba(245,158,11,0.3)' }, 
                            loaderTop: { DEFAULT: '#F97316' }
                        },
                        'theme-oceanic': {
                            primary: { DEFAULT: '#0E7490', rgb: '14, 116, 144', textOn: '#FFFFFF', shadow: 'rgba(14,116,144,0.3)' }, 
                            secondary: { DEFAULT: 'rgba(236, 254, 255, 0.7)', textOn: '#155E75' }, 
                            success: { DEFAULT: '#059669', particle: '#34D399', textOn: '#FFFFFF', shadow: 'rgba(5,150,105,0.3)' }, 
                            error: { DEFAULT: '#BE185D', textOn: '#FFFFFF', shadow: 'rgba(190,24,93,0.3)' }, 
                            warning: { DEFAULT: '#CA8A04', textOn: '#FFFFFF', shadow: 'rgba(202,138,4,0.3)' }, 
                            loaderTop: { DEFAULT: '#0E7490' }
                        },
                        'theme-minty': {
                            primary: { DEFAULT: '#10B981', rgb: '16, 185, 129', textOn: '#FFFFFF', shadow: 'rgba(16,185,129,0.3)'}, 
                            secondary: { DEFAULT: 'rgba(209, 250, 229, 0.7)', textOn: '#065F46' }, 
                            success: { DEFAULT: '#059669', particle: '#34D399', textOn: '#FFFFFF', shadow: 'rgba(5,150,105,0.3)' },
                            error: { DEFAULT: '#EF4444', textOn: '#FFFFFF', shadow: 'rgba(239,68,68,0.3)' },
                            warning: { DEFAULT: '#F59E0B', textOn: '#451A03', shadow: 'rgba(245,158,11,0.3)' },
                            loaderTop: { DEFAULT: '#10B981' }
                        },
                        'theme-royalpurple': {
                            primary: { DEFAULT: '#7E22CE', rgb: '126, 34, 206', textOn: '#FFFFFF', shadow: 'rgba(126,34,206,0.3)' }, 
                            secondary: { DEFAULT: 'rgba(243, 232, 255, 0.7)', textOn: '#581C87' }, 
                            success: { DEFAULT: '#65A30D', particle: '#A3E635', textOn: '#FFFFFF', shadow: 'rgba(101,163,13,0.3)' }, 
                            error: { DEFAULT: '#BE123C', textOn: '#FFFFFF', shadow: 'rgba(190,18,60,0.3)' },
                            warning: { DEFAULT: '#D97706', textOn: '#FFFFFF', shadow: 'rgba(217,119,6,0.3)' }, 
                            loaderTop: { DEFAULT: '#7E22CE' }
                        },
                        'theme-crimsongold': {
                            primary: { DEFAULT: '#DC143C', rgb: '220, 20, 60', textOn: '#FFFFFF', shadow: 'rgba(220,20,60,0.3)' }, // Crimson
                            secondary: { DEFAULT: 'rgba(255, 248, 220, 0.7)', textOn: '#8B0000' }, // Cornsilk bg, DarkRed text
                            success: { DEFAULT: '#FFD700', particle: '#FFDF00', textOn: '#4B0082', shadow: 'rgba(255,215,0,0.3)' }, // Gold, Indigo text
                            error: { DEFAULT: '#B22222', textOn: '#FFFFFF', shadow: 'rgba(178,34,34,0.3)' }, // Firebrick
                            warning: { DEFAULT: '#FFA500', textOn: '#4B0082', shadow: 'rgba(255,165,0,0.3)' }, // Orange
                            loaderTop: { DEFAULT: '#DC143C' }
                        },
                        'theme-deepsea': {
                            primary: { DEFAULT: '#1E90FF', rgb: '30, 144, 255', textOn: '#FFFFFF', shadow: 'rgba(30,144,255,0.3)' }, // DodgerBlue
                            secondary: { DEFAULT: 'rgba(240, 248, 255, 0.7)', textOn: '#00008B' }, // AliceBlue bg, DarkBlue text
                            success: { DEFAULT: '#20B2AA', particle: '#48D1CC', textOn: '#FFFFFF', shadow: 'rgba(32,178,170,0.3)' }, // LightSeaGreen
                            error: { DEFAULT: '#FF6347', textOn: '#FFFFFF', shadow: 'rgba(255,99,71,0.3)' }, // Tomato
                            warning: { DEFAULT: '#FF8C00', textOn: '#FFFFFF', shadow: 'rgba(255,140,0,0.3)' }, // DarkOrange
                            loaderTop: { DEFAULT: '#1E90FF' }
                        }
                    }
                }
            }
        }
    </script>
</head>
<body class="p-0 transition-colors duration-300"> 
    <div id="theme-switcher-controls" class="fixed top-4 right-4 z-[100] flex flex-wrap gap-2 p-2 bg-white/80 dark:bg-black/80 rounded-md shadow-lg">
        <button data-theme="theme-web3" class="px-3 py-1.5 text-xs font-medium bg-blue-600 text-white rounded-md shadow hover:bg-blue-700 transition-colors">Default</button>
        <button data-theme="theme-cyberpunk" class="px-3 py-1.5 text-xs font-medium bg-purple-600 text-white rounded-md shadow hover:bg-purple-700 transition-colors">Cyberpunk</button>
        <button data-theme="theme-forest" class="px-3 py-1.5 text-xs font-medium bg-green-600 text-white rounded-md shadow hover:bg-green-700 transition-colors">Forest</button>
        <button data-theme="theme-sunset" class="px-3 py-1.5 text-xs font-medium bg-orange-500 text-white rounded-md shadow hover:bg-orange-600 transition-colors">Sunset</button>
        <button data-theme="theme-oceanic" class="px-3 py-1.5 text-xs font-medium bg-teal-500 text-white rounded-md shadow hover:bg-teal-600 transition-colors">Oceanic</button>
        <button data-theme="theme-minty" class="px-3 py-1.5 text-xs font-medium bg-emerald-500 text-white rounded-md shadow hover:bg-emerald-600 transition-colors">Minty</button>
        <button data-theme="theme-royalpurple" class="px-3 py-1.5 text-xs font-medium bg-purple-700 text-white rounded-md shadow hover:bg-purple-800 transition-colors">RoyalPurple</button>
        <button data-theme="theme-crimsongold" class="px-3 py-1.5 text-xs font-medium bg-red-600 text-white rounded-md shadow hover:bg-red-700 transition-colors">CrimsonGold</button>
        <button data-theme="theme-deepsea" class="px-3 py-1.5 text-xs font-medium bg-blue-700 text-white rounded-md shadow hover:bg-blue-800 transition-colors">DeepSea</button>
        <button id="toggle-dark-mode" class="px-3 py-1.5 text-xs font-medium bg-gray-700 text-white rounded-md shadow hover:bg-gray-800 transition-colors">Toggle Dark</button>
    </div>

    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
        <button id="open-airdrop-modal-btn" class="px-6 py-3 bg-indigo-600 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700 transition-colors">
            Open Airdrop Checker
        </button>
    </div>


    <div id="airdrop-plugin-wrapper" class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 dark:bg-black/90 modal-hidden p-4 sm:p-0">
        <div id="airdrop-checker-modal" 
             class="w-full max-w-lg relative flex flex-col 
                    md:rounded-xl md:max-h-[90vh] 
                    sm:rounded-t-2xl sm:absolute sm:bottom-0 sm:left-0 sm:right-0 sm:max-h-[60vh] 
                    shadow-2xl overflow-hidden
                    bg-surface text-main-text border border-main-border 
                    ">
            <div id="loading-overlay" class="absolute inset-0 bg-gray-400/30 dark:bg-gray-900/30 z-[15] hidden opacity-0 items-center justify-center">
            </div>
            
            <div class="sm:block md:hidden pt-3 pb-2 flex justify-center cursor-grab bg-inherit rounded-t-2xl sticky top-0 z-20 handle-bg">
                <div class="w-12 h-1.5 rounded-full handle-indicator-bg"></div>
            </div>

            <div class="p-6 border-b flex justify-between items-center bg-inherit modal-header sticky top-0 sm:top-auto md:top-0 z-20 header-border-color"> 
                <div class="flex items-center space-x-4"> 
                    <img id="app-logo" src="https://placehold.co/48x48/1D4ED8/FFFFFF?text=AC" alt="App Logo" class="w-12 h-12 rounded-lg object-cover shadow-md"> 
                    <h1 id="app-name" class="text-2xl font-semibold main-text-color">Airdrop Checker</h1> 
                </div>
            </div>

            <div class="p-6 space-y-6 overflow-y-auto flex-grow modal-content custom-scrollbar relative"> 
                <div class="p-5 rounded-xl text-center project-desc-bg card-shadow"> 
                    <p id="project-desc-text" class="text-base project-desc-text-color"> This XXX Project is airdropping a total of 1,000,000 $TOKEN to eligible users.</p>
                </div>

                <div id="timeline-status-section" class="space-y-5">
                    <div class="relative py-4">
                        <div id="timeline-connector-bg" class="timeline-connector">
                             <div id="timeline-progress" class="h-full" style="width: 50%;"></div>
                        </div>
                        <div class="flex justify-between">
                            <div class="timeline-node text-center w-1/3">
                                <span class="block text-sm font-medium mt-2 timeline-label-color">Start</span>
                                <span class="block text-xs timeline-date-color">May 01</span>
                            </div>
                            <div class="timeline-node active text-center w-1/3">
                                <span class="block text-sm font-semibold mt-2">Current</span>
                                <span class="block text-xs timeline-date-color">May 10</span>
                            </div>
                            <div class="timeline-node text-center timeline-node-inactive-color w-1/3">
                                <span class="block text-sm font-medium mt-2 timeline-label-color">End</span>
                                <span class="block text-xs timeline-date-color">May 30</span>
                            </div>
                        </div>
                    </div>

                    <div class="status-card-bg p-5 rounded-xl space-y-4 shadow-lg card-shadow"> 
                        <div class="flex justify-between items-center">
                            <span class="text-base font-medium flex items-center status-text-color">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="mr-2 opacity-90"><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path><path d="m9 12 2 2 4-4"></path></svg>
                                Status:
                            </span>
                            <div class="px-3.5 py-1.5 text-sm font-semibold rounded-full flex items-center space-x-2 status-tag-bg status-tag-text-color">
                                <span class="w-2.5 h-2.5 status-indicator-color rounded-full pulse-indicator"></span>
                                <span>Claim Open</span>
                            </div>
                        </div>
                        <div class="text-center space-y-1.5 pt-2">
                            <p class="text-sm flex items-center justify-center countdown-label-color">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="mr-2"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
                                Ends in:
                            </p>
                            <div id="countdown-display" class="flex justify-center items-center space-x-1.5 font-roboto-mono text-2xl font-bold countdown-value-color min-h-[48px]"> 
                                <div class="countdown-unit-container"><span class="flip-animate-container"><span id="days-value" class="p-2.5 countdown-unit-bg rounded-lg shadow-inner">20</span></span><span class="text-sm font-medium ml-1.5 countdown-unit-label-color">d</span></div>
                                <div class="countdown-unit-container"><span class="flip-animate-container"><span id="hours-value" class="p-2.5 countdown-unit-bg rounded-lg shadow-inner">05</span></span><span class="text-sm font-medium ml-1.5 countdown-unit-label-color">h</span></div>
                                <div class="countdown-unit-container"><span class="flip-animate-container"><span id="minutes-value" class="p-2.5 countdown-unit-bg rounded-lg shadow-inner">42</span></span><span class="text-sm font-medium ml-1.5 countdown-unit-label-color">m</span></div>
                                <div class="countdown-unit-container"><span class="flip-animate-container"><span id="seconds-value" class="p-2.5 countdown-seconds-bg countdown-seconds-text-color rounded-lg shadow-inner">18</span></span><span class="text-sm font-medium ml-1.5 countdown-unit-label-color">s</span></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="space-y-5"> 
                    <div id="query-state" class="state-container active space-y-5">
                        <div class="relative">
                            <input type="text" id="address-input"
                                   class="w-full h-14 px-5 py-3 pr-16 text-base border rounded-xl focus:ring-2 outline-none transition-all duration-200 input-bg input-text-color input-border-color focus-ring-color shadow-sm placeholder-secondary-text-color"
                                   placeholder="Enter or paste wallet address (0x...)">
                            <button id="connect-wallet-btn" title="Connect Wallet"
                                    class="absolute right-3 top-1/2 transform -translate-y-1/2 p-2.5 rounded-lg transition-colors connect-wallet-icon-color hover-bg-opacity">
                                <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M21 12V7H5a2 2 0 0 1 0-4h14v4"></path>
                                    <path d="M3 5v14a2 2 0 0 0 2 2h16v-5"></path>
                                    <path d="M18 12a2 2 0 0 0 0 4h4v-4h-4z"></path>
                                </svg>
                            </button>
                        </div>
                        <button id="query-button"
                                class="w-full h-14 text-lg font-semibold rounded-xl transition-all duration-200 focus:outline-none focus:ring-2 focus-ring-offset query-btn-bg query-btn-text-color hover-query-btn-bg focus-ring-color shadow-md hover:shadow-lg">
                            Check Eligibility
                        </button>
                    </div>

                    <div id="loading-state" class="state-container hidden flex flex-col items-center justify-center text-center min-h-[250px] space-y-4"> 
                         <input type="text" class="w-full h-14 px-5 py-3 text-base border rounded-xl cursor-not-allowed disabled-input-bg disabled-input-text-color disabled-input-border-color"
                                   placeholder="0x..." disabled id="loading-address-input">
                        <button class="w-full h-14 text-lg font-semibold rounded-xl flex items-center justify-center space-x-2.5 cursor-not-allowed disabled-btn-bg shadow-md">
                            <div class="loader loader-border-color loader-top-color"></div>
                            <span class="disabled-btn-text-color">Checking...</span>
                        </button>
                    </div>

                    <div id="success-state" class="state-container hidden space-y-5 relative">
                        <div class="particles-success" id="success-particles"></div>
                        <div class="p-6 rounded-xl text-center space-y-5 relative z-10 success-card-bg success-card-border card-shadow">
                            <div class="inline-flex items-center justify-center w-24 h-24 rounded-full float-gift success-icon-outer-bg shadow-lg">
                                 <div class="inline-flex items-center justify-center w-20 h-20 rounded-full success-icon-inner-bg">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="success-icon-color">
                                        <path d="M20 12v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-4"/>
                                        <path d="M4 10V6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v4"/>
                                        <path d="M12 22v-8"/>
                                        <path d="m15 10-3-3-3 3"/>
                                        <path d="M4.5 10.5h15"/>
                                    </svg>
                                </div>
                            </div>
                            <h3 class="text-2xl font-semibold success-title-color">Congratulations! You are eligible!</h3>
                            
                            <div class="p-5 rounded-lg shadow-inner claim-details-bg">
                                <p class="text-base claim-details-label-color">Available to claim:</p>
                                <p class="text-4xl font-bold claim-details-value-color" id="claim-amount-token">123.45 $TOKEN</p>
                                <p class="text-base claim-details-usd-color" id="claim-amount-usd">≈ $12.34 USD</p>
                            </div>
                             <button id="claim-button"
                                    class="w-full h-14 text-lg font-semibold rounded-xl transition-all duration-200 focus:outline-none focus:ring-2 focus-ring-offset claim-btn-bg claim-btn-text-color hover-claim-btn-bg focus-ring-color shadow-md hover:shadow-lg">
                                Claim Now
                            </button>
                        </div>
                    </div>

                    <div id="failure-state" class="state-container hidden space-y-5">
                        <div class="p-6 rounded-xl text-center space-y-4 failure-card-bg failure-card-border card-shadow">
                            <svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="mx-auto failure-icon-color">
                                <circle cx="12" cy="12" r="10"></circle>
                                <line x1="12" y1="8" x2="12" y2="12"></line>
                                <line x1="12" y1="16" x2="12.01" y2="16"></line>
                            </svg>
                            <h3 class="text-2xl font-semibold failure-title-color">Sorry, this address is not eligible.</h3>
                            <p class="text-base failure-text-color">You can try another wallet address or check the event rules.</p>
                        </div>
                        <button id="recheck-button"
                                class="w-full h-14 text-lg font-semibold rounded-xl transition-all duration-200 focus:outline-none focus:ring-2 focus-ring-offset recheck-btn-bg hover-recheck-btn-bg recheck-btn-text-color focus-ring-color shadow-md hover:shadow-lg">
                            Check Another Address
                        </button>
                    </div>
                </div>
            </div>
             <div class="p-4 border-t text-center footer-bg footer-border sticky bottom-0 z-20">
                <p class="text-xs footer-text-color">Powered by Gemini AI</p>
            </div>
        </div>
    </div>

    <script>
        // --- Global Config (Simulated) ---
        const APP_CONFIG = {
            APP_NAME: "Airdrop Pro", 
            APP_LOGO_DEFAULT: "https://placehold.co/48x48/2563EB/FFFFFF?text=AP&font=inter",
            APP_LOGO_CYBER: "https://placehold.co/48x48/00F0FF/0C0C1A?text=CY&font=roboto-mono",
            APP_LOGO_FOREST: "https://placehold.co/48x48/228B22/F5FFF5?text=FP&font=inter",
            APP_LOGO_SUNSET: "https://placehold.co/48x48/FF7F50/FFFFFF?text=SP&font=inter",
            APP_LOGO_OCEANIC: "https://placehold.co/48x48/00CED1/FFFFFF?text=OP&font=inter",
            APP_LOGO_MINTY: "https://placehold.co/48x48/66CDAA/FFFFFF?text=MP&font=inter",
            APP_LOGO_ROYALPURPLE: "https://placehold.co/48x48/6A0DAD/FFFFFF?text=RP&font=inter",
            APP_LOGO_CRIMSONGOLD: "https://placehold.co/48x48/DC143C/FFFFFF?text=CG&font=inter",
            APP_LOGO_DEEPSEA: "https://placehold.co/48x48/1E90FF/FFFFFF?text=DS&font=inter",
            PROJECT_DESC: "This demo project is airdropping 1,000,000 $DEMO tokens to lucky users.", 
            CLAIM_COIN_SYMBOL: "$DEMO",
            END_DATE_STRING: "2025-05-30T23:59:59", 
            MOCK_ELIGIBLE_AMOUNT: (Math.random() * 1000 + 50).toFixed(2),
            MOCK_USD_PRICE_PER_TOKEN: (Math.random() * 0.5 + 0.1).toFixed(4),
            ACTIVE_ACCENT_THEME: 'theme-web3', // Default accent theme
        };

        // --- DOM Elements ---
        const modalWrapper = document.getElementById('airdrop-plugin-wrapper');
        const modal = document.getElementById('airdrop-checker-modal');
        const openModalBtn = document.getElementById('open-airdrop-modal-btn');
        const loadingOverlay = document.getElementById('loading-overlay');
        const timelineStatusSection = document.getElementById('timeline-status-section'); 
        const appNameEl = document.getElementById('app-name');
        const appLogoEl = document.getElementById('app-logo');
        const projectDescEl = document.getElementById('project-desc-text');
        const timelineProgress = document.getElementById('timeline-progress');
        const daysValueEl = document.getElementById('days-value');
        const hoursValueEl = document.getElementById('hours-value');
        const minutesValueEl = document.getElementById('minutes-value');
        const secondsValueEl = document.getElementById('seconds-value');
        const queryStateEl = document.getElementById('query-state');
        const loadingStateEl = document.getElementById('loading-state');
        const successStateEl = document.getElementById('success-state');
        const failureStateEl = document.getElementById('failure-state');
        const addressInput = document.getElementById('address-input');
        const loadingAddressInput = document.getElementById('loading-address-input');
        const connectWalletBtn = document.getElementById('connect-wallet-btn');
        const queryButton = document.getElementById('query-button');
        const claimAmountTokenEl = document.getElementById('claim-amount-token');
        const claimAmountUsdEl = document.getElementById('claim-amount-usd');
        const claimButton = document.getElementById('claim-button');
        const recheckButton = document.getElementById('recheck-button');
        const successParticlesContainer = document.getElementById('success-particles');
        const themeSwitcherControls = document.getElementById('theme-switcher-controls');
        const toggleDarkModeBtn = document.getElementById('toggle-dark-mode');

        // --- Modal Control ---
        function showAirdropModal() {
            if (modalWrapper) {
                modalWrapper.classList.remove('modal-hidden');
                modalWrapper.classList.add('modal-visible');
                requestAnimationFrame(() => { 
                    if (window.innerWidth < 768) {
                        modal.classList.add('slide-up-mobile-active');
                    } else {
                        modal.classList.add('fade-in-desktop-active');
                    }
                });
            }
        }

        function hideAirdropModal() {
            if (modalWrapper) {
                 if (window.innerWidth < 768) {
                    modal.classList.remove('slide-up-mobile-active'); 
                } else {
                    modal.classList.remove('fade-in-desktop-active'); 
                }
                setTimeout(() => {
                    modalWrapper.classList.add('modal-hidden');
                    modalWrapper.classList.remove('modal-visible');
                }, 300); 
            }
        }
        
        if(openModalBtn) {
            openModalBtn.addEventListener('click', showAirdropModal);
        }
        if(modalWrapper) {
            modalWrapper.addEventListener('click', function(event) {
                if (event.target === modalWrapper) {
                    hideAirdropModal();
                }
            });
        }


        // --- Theme Management ---
        function applyAccentTheme(themeName) {
            APP_CONFIG.ACTIVE_ACCENT_THEME = themeName;
            updateDynamicThemeStyles(); 
            applyAllStyles(); 
        }

        function updateDynamicThemeStyles() {
            const themeKey = APP_CONFIG.ACTIVE_ACCENT_THEME; 
            if (themeKey === 'theme-cyberpunk') appLogoEl.src = APP_CONFIG.APP_LOGO_CYBER;
            else if (themeKey === 'theme-forest') appLogoEl.src = APP_CONFIG.APP_LOGO_FOREST;
            else if (themeKey === 'theme-sunset') appLogoEl.src = APP_CONFIG.APP_LOGO_SUNSET;
            else if (themeKey === 'theme-oceanic') appLogoEl.src = APP_CONFIG.APP_LOGO_OCEANIC;
            else if (themeKey === 'theme-minty') appLogoEl.src = APP_CONFIG.APP_LOGO_MINTY;
            else if (themeKey === 'theme-royalpurple') appLogoEl.src = APP_CONFIG.APP_LOGO_ROYALPURPLE;
            else if (themeKey === 'theme-crimsongold') appLogoEl.src = APP_CONFIG.APP_LOGO_CRIMSONGOLD;
            else if (themeKey === 'theme-deepsea') appLogoEl.src = APP_CONFIG.APP_LOGO_DEEPSEA;
            else appLogoEl.src = APP_CONFIG.APP_LOGO_DEFAULT;
            
            setCSSVariablesForAccentTheme();
        }
        
        function getTailwindColors() { 
            return window.tailwind.config.theme.extend.colors;
        }

        function setCSSVariablesForAccentTheme() {
            const root = document.documentElement;
            const twColors = getTailwindColors(); 
            const accentThemeKey = APP_CONFIG.ACTIVE_ACCENT_THEME; 
            const accentColors = twColors[accentThemeKey]; 

            if (!accentColors) {
                console.error(`Accent theme ${accentThemeKey} not found in Tailwind config.`);
                return;
            }
            
            const primaryRgb = accentColors.primary?.rgb || '37, 99, 235'; 
            const particleColor = accentColors.success?.particle || '#34D399'; 

            root.style.setProperty('--particle-color', particleColor);
            root.style.setProperty('--pulse-node-color-alpha', `rgba(${primaryRgb}, 0.4)`);
            
            const isDark = document.documentElement.classList.contains('dark');
            const surfaceBg = isDark ? twColors['surface-bg'].dark : twColors['surface-bg'].light;
            root.style.setProperty('--bg-surface', surfaceBg); // For .timeline-node::before

            // For Card Shadows
            const primaryShadow = accentColors.primary?.shadow || (isDark ? 'rgba(0,0,0,0.3)' : 'rgba(0,0,0,0.1)');
            const secondaryShadow = accentColors.secondary?.shadow || (isDark ? 'rgba(0,0,0,0.2)' : 'rgba(0,0,0,0.05)'); // Softer secondary shadow
            root.style.setProperty('--card-shadow-color-1', primaryShadow);
            root.style.setProperty('--card-shadow-color-2', secondaryShadow);
            root.style.setProperty('--card-shadow-color-1-dark', primaryShadow); 
            root.style.setProperty('--card-shadow-color-2-dark', secondaryShadow);
        }


        function initializeApp() {
            appNameEl.textContent = APP_CONFIG.APP_NAME;
            projectDescEl.textContent = APP_CONFIG.PROJECT_DESC;
            
            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
                document.documentElement.classList.add('dark');
            }
            
            applyAccentTheme(APP_CONFIG.ACTIVE_ACCENT_THEME); 
            
            startCountdown();
            const startDate = new Date(2025, 4, 1); 
            const endDateForCalc = new Date(APP_CONFIG.END_DATE_STRING);
            const currentDate = new Date(); 
            
            let exampleProgress = 0;
            if (currentDate >= startDate) { 
                 if (currentDate < endDateForCalc) {
                    exampleProgress = ((currentDate - startDate) / (endDateForCalc - startDate)) * 100;
                } else { 
                    exampleProgress = 100;
                }
            }
            timelineProgress.style.width = `${Math.min(100, Math.max(0, exampleProgress))}%`;
            
            const timelineNodes = modal.querySelectorAll('.timeline-node');
            timelineNodes.forEach(node => node.classList.remove('completed', 'active')); 

            if (exampleProgress >= 0 && timelineNodes.length > 0) timelineNodes[0].classList.add('completed');
            if (exampleProgress < 100 && exampleProgress >= 0 && timelineNodes.length > 1) { 
                timelineNodes[1].classList.add('active');
            } else if (exampleProgress >=100 && timelineNodes.length > 2) { 
                if(timelineNodes[1]) timelineNodes[1].classList.add('completed');
                if(timelineNodes[2]) timelineNodes[2].classList.add('completed'); 
            }

            showState('query-state'); 
        }
        
        function applyAllStyles() { 
            const isDark = document.documentElement.classList.contains('dark');
            const accentThemeKey = APP_CONFIG.ACTIVE_ACCENT_THEME; 
            const twColors = getTailwindColors();
            const accentColors = twColors[accentThemeKey];
            const baseColors = {
                pageBg: isDark ? twColors['page-bg'].dark : twColors['page-bg'].light,
                surfaceBg: isDark ? twColors['surface-bg'].dark : twColors['surface-bg'].light,
                textColor: isDark ? twColors['text-color'].dark : twColors['text-color'].light,
                secondaryTextColor: isDark ? twColors['secondary-text-color'].dark : twColors['secondary-text-color'].light,
                borderColor: isDark ? twColors['border-color'].dark : twColors['border-color'].light,
                disabledBg: isDark ? twColors['disabled-bg'].dark : twColors['disabled-bg'].light,
                disabledText: isDark ? twColors['disabled-text'].dark : twColors['disabled-text'].light,
                loaderBorderGeneric: isDark ? twColors['loader-border-generic'].dark : twColors['loader-border-generic'].light,
            };

            if (!accentColors) {
                console.error(`Accent theme ${accentThemeKey} colors not found! Using default.`);
                // Fallback to web3 if current is invalid, or handle error differently
                APP_CONFIG.ACTIVE_ACCENT_THEME = 'theme-web3'; 
                // Re-fetch accentColors with fallback
                accentColors = twColors[APP_CONFIG.ACTIVE_ACCENT_THEME]; 
            }
            
            const getTextOnAccentColor = (accentColorName) => {
                const colorObj = accentColors[accentColorName];
                if (colorObj && colorObj.textOn) return colorObj.textOn;
                const bgColor = colorObj?.DEFAULT || '#000000'; // Fallback to black if no DEFAULT
                 if (typeof bgColor === 'string' && bgColor.startsWith('#')) {
                    const r = parseInt(bgColor.slice(1, 3), 16);
                    const g = parseInt(bgColor.slice(3, 5), 16);
                    const b = parseInt(bgColor.slice(5, 7), 16);
                    const brightness = (r * 299 + g * 587 + b * 114) / 1000;
                    return brightness > 128 ? baseColors.textColor : '#FFFFFF'; // Use base text for light bg, white for dark
                }
                return '#FFFFFF'; // Default fallback
            };
            
            // --- Apply global light/dark mode base styles ---
            document.body.className = `p-0 transition-colors duration-300 ${isDark ? 'dark' : ''}`;
            document.body.style.backgroundColor = baseColors.pageBg;

            modal.className = `w-full max-w-lg relative flex flex-col md:rounded-xl md:max-h-[90vh] sm:rounded-t-2xl sm:absolute sm:bottom-0 sm:left-0 sm:right-0 sm:max-h-[60vh] shadow-2xl overflow-hidden border`;
            modal.style.backgroundColor = baseColors.surfaceBg;
            modal.style.color = baseColors.textColor;
            modal.style.borderColor = baseColors.borderColor;
            
            if (modalWrapper.classList.contains('modal-visible')) {
                 if (window.innerWidth < 768) modal.classList.add('slide-up-mobile-active');
                 else modal.classList.add('fade-in-desktop-active');
            }

            // --- Apply Accent Theme Colors to specific elements ---
            // Header
            modal.querySelector('.modal-header').style.borderColor = baseColors.borderColor;
            modal.querySelector('.modal-header').style.backgroundColor = baseColors.surfaceBg; // Ensure header bg matches modal
            modal.querySelector('#app-name').style.color = baseColors.textColor;
            modal.querySelector('.handle-bg').style.backgroundColor = baseColors.surfaceBg;
            modal.querySelector('.handle-indicator-bg').style.backgroundColor = isDark ? '#4A5562' : '#D1D5DB'; // gray-600 / gray-300


            // Project Description (显眼度 ≈ 7-8)
            const projectDescBg = modal.querySelector('.project-desc-bg');
            projectDescBg.style.backgroundColor = accentColors.secondary.DEFAULT; // Uses the accent's secondary color
            projectDescBg.style.color = accentColors.secondary.textOn || baseColors.secondaryTextColor; // Use textOn or fallback
            projectDescBg.classList.add('card-shadow');


            // Timeline (显眼度 ≈ 6-7)
            modal.querySelector('#timeline-progress').style.backgroundColor = accentColors.primary.DEFAULT;
            modal.querySelector('#timeline-connector-bg').style.backgroundColor = baseColors.borderColor;
            modal.querySelectorAll('.timeline-node').forEach(node => {
                node.style.borderColor = baseColors.borderColor;
                if(node.classList.contains('active')) node.style.color = accentColors.primary.DEFAULT;
                else node.style.color = baseColors.secondaryTextColor;
            });
            modal.querySelectorAll('.timeline-label-color').forEach(el => el.style.color = baseColors.secondaryTextColor);
            modal.querySelectorAll('.timeline-date-color').forEach(el => el.style.color = isDark ? '#6B7280': '#9CA3AF' ); // gray-500 / gray-400

            // Status Card (显眼度 ≈ 9)
            modal.querySelector('.status-card-bg').className = `p-5 rounded-xl space-y-4 shadow-lg card-shadow ${isDark ? '' : 'bg-gray-50'}`; // bg-gray-50 only for light mode
            if(isDark) modal.querySelector('.status-card-bg').style.backgroundColor = baseColors.surfaceBg;

            modal.querySelector('.status-text-color').style.color = baseColors.textColor;
            modal.querySelector('.status-tag-bg').style.backgroundColor = `rgba(${hexToRgb(accentColors.success.DEFAULT)}, 0.2)`; // Opacity for bg
            modal.querySelector('.status-tag-text-color').style.color = accentColors.success.DEFAULT; // Full color for text
            modal.querySelector('.status-indicator-color').style.backgroundColor = accentColors.success.DEFAULT;

            // Countdown
            modal.querySelector('.countdown-label-color').style.color = baseColors.secondaryTextColor;
            modal.querySelector('.countdown-value-color').style.color = baseColors.textColor;
            modal.querySelectorAll('.countdown-unit-bg').forEach(el => el.style.backgroundColor = isDark ? baseColors.borderColor : '#E5E7EB' ); // gray-200 for light
            modal.querySelectorAll('.countdown-unit-label-color').forEach(el => el.style.color = baseColors.secondaryTextColor);
            // Seconds color is handled dynamically in updateCountdown

            // Query State (显眼度 ≈ 8 for button)
            const addressInputElement = modal.querySelector('#address-input');
            addressInputElement.style.backgroundColor = baseColors.surfaceBg;
            addressInputElement.style.color = baseColors.textColor;
            addressInputElement.style.borderColor = baseColors.borderColor;
            addressInputElement.classList.add(`focus:ring-[${accentColors.primary.DEFAULT}]`);
            addressInputElement.style.setProperty('--tw-placeholder-color', baseColors.secondaryTextColor); // For placeholder
            
            modal.querySelector('#connect-wallet-btn').style.color = accentColors.primary.DEFAULT;
            modal.querySelector('#connect-wallet-btn').classList.add(isDark ? 'hover:bg-gray-700' : 'hover:bg-blue-100');
            
            queryButton.style.backgroundColor = accentColors.primary.DEFAULT;
            queryButton.style.color = getTextOnAccentColor('primary');
            queryButton.classList.add(`hover:bg-[${shadeColor(accentColors.primary.DEFAULT, -10)}]`); // Darken on hover
            queryButton.classList.add(`focus:ring-[${accentColors.primary.DEFAULT}]`);
            queryButton.classList.add(`focus:ring-offset-[${baseColors.surfaceBg}]`);


            // Loading State
            modal.querySelector('#loading-address-input').style.backgroundColor = baseColors.disabledBg;
            modal.querySelector('#loading-address-input').style.color = baseColors.disabledText;
            modal.querySelector('#loading-address-input').style.borderColor = baseColors.borderColor;
            const loadingBtn = modal.querySelector('#loading-state button');
            loadingBtn.style.backgroundColor = baseColors.disabledBg;
            loadingBtn.querySelector('.disabled-btn-text-color').style.color = baseColors.disabledText;
            modal.querySelector('#loading-state .loader').style.borderColor = baseColors.loaderBorderGeneric;
            modal.querySelector('#loading-state .loader').style.borderTopColor = accentColors.loaderTop.DEFAULT;
            modal.querySelector('#loading-state .loading-text-color').style.color = baseColors.secondaryTextColor;
            
            // Success State (显眼度 ≈ 8 for button)
            modal.querySelector('.success-card-bg').style.backgroundColor = `rgba(${hexToRgb(accentColors.success.DEFAULT)}, 0.15)`; 
            modal.querySelector('.success-card-border').style.borderColor = `rgba(${hexToRgb(accentColors.success.DEFAULT)}, 0.3)`; 
            modal.querySelector('.success-icon-outer-bg').style.backgroundColor = `rgba(${hexToRgb(accentColors.success.DEFAULT)}, 0.2)`;
            modal.querySelector('.success-icon-inner-bg').style.backgroundColor = `rgba(${hexToRgb(accentColors.success.DEFAULT)}, 0.3)`;
            modal.querySelector('.success-icon-color').style.color = accentColors.success.DEFAULT; 
            modal.querySelector('.success-title-color').style.color = accentColors.success.DEFAULT; 

            modal.querySelector('.claim-details-bg').style.backgroundColor = baseColors.surfaceBg;
            modal.querySelector('.claim-details-label-color').style.color = baseColors.secondaryTextColor;
            modal.querySelector('.claim-details-value-color').style.color = baseColors.textColor;
            modal.querySelector('.claim-details-usd-color').style.color = baseColors.secondaryTextColor;
            
            claimButton.style.backgroundColor = accentColors.success.DEFAULT;
            claimButton.style.color = getTextOnAccentColor('success');
            claimButton.classList.add(`hover:bg-[${shadeColor(accentColors.success.DEFAULT, -10)}]`);
            claimButton.classList.add(`focus:ring-[${accentColors.success.DEFAULT}]`);
            claimButton.classList.add(`focus:ring-offset-[${baseColors.surfaceBg}]`);

             if (claimButton.disabled) { 
                 claimButton.style.backgroundColor = baseColors.disabledBg;
                 claimButton.style.color = baseColors.disabledText; 
                 claimButton.classList.remove(`hover:bg-[${shadeColor(accentColors.success.DEFAULT, -10)}]`);
            }

            // Failure State
            modal.querySelector('.failure-card-bg').style.backgroundColor = `rgba(${hexToRgb(accentColors.error.DEFAULT)}, 0.15)`;
            modal.querySelector('.failure-card-border').style.borderColor = `rgba(${hexToRgb(accentColors.error.DEFAULT)}, 0.3)`;
            modal.querySelector('.failure-icon-color').style.color = accentColors.error.DEFAULT;
            modal.querySelector('.failure-title-color').style.color = accentColors.error.DEFAULT;
            modal.querySelector('.failure-text-color').style.color = baseColors.secondaryTextColor;
            
            recheckButton.style.backgroundColor = baseColors.disabledBg; // Use disabled for recheck, or a neutral secondary
            recheckButton.style.color = baseColors.textColor;
            recheckButton.classList.add(isDark ? 'hover:bg-gray-600' : 'hover:bg-gray-300');
            recheckButton.classList.add(`focus:ring-gray-400`);
            recheckButton.classList.add(`focus:ring-offset-[${baseColors.surfaceBg}]`);


            // Card shadows based on accent theme
            document.documentElement.style.setProperty('--card-shadow-color-1', accentColors.primary?.shadow || (isDark ? 'rgba(0,0,0,0.3)' : 'rgba(0,0,0,0.1)'));
            document.documentElement.style.setProperty('--card-shadow-color-2', accentColors.secondary?.shadow || (isDark ? 'rgba(0,0,0,0.2)' : 'rgba(0,0,0,0.05)'));
            document.documentElement.style.setProperty('--card-shadow-color-1-dark', accentColors.primary?.shadow || 'rgba(0,0,0,0.3)'); 
            document.documentElement.style.setProperty('--card-shadow-color-2-dark', accentColors.secondary?.shadow || 'rgba(0,0,0,0.2)');
        }


        function showState(stateId) {
            [queryStateEl, loadingStateEl, successStateEl, failureStateEl].forEach(el => {
                el.classList.add('hidden');
                el.classList.remove('active');
            });
            const activeStateEl = document.getElementById(stateId);
            const timelineSection = document.getElementById('timeline-status-section');

            if (activeStateEl) {
                activeStateEl.classList.remove('hidden');
                activeStateEl.classList.add('active');
                if (stateId === 'success-state') createParticles();

                if (stateId === 'loading-state') {
                    loadingOverlay.classList.remove('hidden');
                    requestAnimationFrame(() => loadingOverlay.style.opacity = '1'); 
                    if(timelineSection) timelineSection.classList.remove('hidden-for-result'); 
                } else {
                    loadingOverlay.style.opacity = '0';
                    setTimeout(() => loadingOverlay.classList.add('hidden'), 300); 
                    if (stateId === 'success-state' || stateId === 'failure-state') {
                        if(timelineSection) timelineSection.classList.add('hidden-for-result');
                    } else {
                         if(timelineSection) timelineSection.classList.remove('hidden-for-result');
                    }
                }
            }
        }
        
        function createParticles() {
            if (!successParticlesContainer) return;
            successParticlesContainer.innerHTML = ''; 
            const particleColor = getComputedStyle(document.documentElement).getPropertyValue('--particle-color').trim() || '#34D399';
            for (let i = 0; i < 25; i++) { 
                const particle = document.createElement('div');
                particle.classList.add('particle');
                particle.style.backgroundColor = particleColor;
                
                const startX = Math.random() * 70 + 15; 
                const startY = Math.random() * 40 + 30; 

                const angle = Math.random() * Math.PI * 2;
                const distance = Math.random() * 150 + 70; 
                const endX = startX + Math.cos(angle) * distance;
                const endY = startY + Math.sin(angle) * distance;

                particle.style.setProperty('--start-x', `${startX}%`);
                particle.style.setProperty('--start-y', `${startY}%`);
                particle.style.setProperty('--end-x', `${endX}%`);
                particle.style.setProperty('--end-y', `${endY}%`);
                
                particle.style.animationDelay = `${Math.random() * 1}s`; 
                successParticlesContainer.appendChild(particle);
            }
        }

        let countdownInterval;
        function startCountdown() {
            const endDate = new Date(APP_CONFIG.END_DATE_STRING).getTime();
            if (isNaN(endDate)) {
                console.error("Invalid end date config: ", APP_CONFIG.END_DATE_STRING);
                [daysValueEl, hoursValueEl, minutesValueEl, secondsValueEl].forEach(el => { if(el) el.textContent = '--';});
                return;
            }

            function updateDisplay() {
                const now = new Date().getTime();
                const distance = endDate - now;

                if (distance < 0) {
                    clearInterval(countdownInterval);
                    if(daysValueEl) daysValueEl.textContent = '00'; 
                    if(hoursValueEl) hoursValueEl.textContent = '00';
                    if(minutesValueEl) minutesValueEl.textContent = '00';
                    if(secondsValueEl) secondsValueEl.textContent = '00';
                    const countdownLabel = document.getElementById('countdown-display')?.parentElement?.querySelector('p');
                    if(countdownLabel) countdownLabel.textContent = "Event Ended";
                    return;
                }

                const d = Math.floor(distance / (1000 * 60 * 60 * 24));
                const h = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                const m = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                const s = Math.floor((distance % (1000 * 60)) / 1000);

                if(daysValueEl) animateFlip(daysValueEl, String(d).padStart(2, '0'));
                if(hoursValueEl) animateFlip(hoursValueEl, String(h).padStart(2, '0'));
                if(minutesValueEl) animateFlip(minutesValueEl, String(m).padStart(2, '0'));
                if(secondsValueEl) animateFlip(secondsValueEl, String(s).padStart(2, '0'));
                
                const secondsValEl = secondsValueEl;
                if (!secondsValEl) return;

                const accentThemeKey = APP_CONFIG.ACTIVE_ACCENT_THEME;
                const twColors = getTailwindColors();
                const accentColors = twColors[accentThemeKey];
                const isDark = document.documentElement.classList.contains('dark');

                const baseClasses = ['p-2.5', 'rounded-lg', 'shadow-inner'];
                let dynamicBgClass = '';
                let dynamicTextColor = '';
                let dynamicFontWeight = 'font-normal'; // Default to normal

                const colorPattern = /(bg|text)-[\w-]+(?:L\/\d+|\/\d+)?|font-(bold|semibold|normal)/g; 
                secondsValEl.className = secondsValEl.className.replace(colorPattern, '').replace(/\s\s+/g, ' ').trim();


                if (distance < 60 * 1000) { 
                    dynamicBgClass = `bg-[${accentColors.error.DEFAULT}]`;
                    dynamicTextColor = `text-[${accentColors.error.textOn}]`;
                    dynamicFontWeight = 'font-bold';
                } else if (distance < 10 * 60 * 1000) { 
                    dynamicBgClass = `bg-[${accentColors.warning.DEFAULT}]`;
                    dynamicTextColor = `text-[${accentColors.warning.textOn}]`;
                    dynamicFontWeight = 'font-semibold';
                } else { 
                    dynamicBgClass = isDark ? 'bg-border-color-dark' : 'bg-gray-200'; // From .countdown-unit-bg
                    dynamicTextColor = isDark ? 'text-text-color-dark' : 'text-text-color-light'; // From .countdown-value-color
                }
                
                secondsValEl.classList.add(...baseClasses, dynamicBgClass, dynamicTextColor, dynamicFontWeight, 'bg-opacity-80');
            }
            
            function animateFlip(element, newValue) {
                if (!element || element.textContent === newValue) return; 
                
                const flipContainer = element.parentElement; 
                if (flipContainer.classList.contains('is-flipping')) return; 

                flipContainer.classList.add('is-flipping');
                element.classList.add('flip-animate');
                element.textContent = newValue;
                setTimeout(() => {
                    if (element) element.classList.remove('flip-animate');
                    if (flipContainer) flipContainer.classList.remove('is-flipping');
                }, 480); 
            }

            if(daysValueEl && hoursValueEl && minutesValueEl && secondsValueEl) { 
                updateDisplay();
                clearInterval(countdownInterval); 
                countdownInterval = setInterval(updateDisplay, 1000);
            } else { console.warn("Countdown display elements not found. Countdown not started."); }
        }
        
        queryButton.addEventListener('click', () => {
            const address = addressInput.value.trim();
            const accentThemeKey = APP_CONFIG.ACTIVE_ACCENT_THEME;
            const accentColors = getTailwindColors()[accentThemeKey];
            
            addressInput.classList.remove(`border-[${accentColors.error.DEFAULT}]`, `focus:ring-[${accentColors.error.DEFAULT}]`);
            if (!address || !address.startsWith('0x') || address.length !== 42) {
                addressInput.classList.add(`border-[${accentColors.error.DEFAULT}]`, `focus:ring-[${accentColors.error.DEFAULT}]`);
                addressInput.focus();
                return;
            }
            loadingAddressInput.value = address; 
            simulateQuery(address);
        });

        connectWalletBtn.addEventListener('click', async () => {
            connectWalletBtn.disabled = true;
            const originalIcon = connectWalletBtn.innerHTML;
            const loaderDiv = document.createElement('div');
            const accentThemeKey = APP_CONFIG.ACTIVE_ACCENT_THEME;
            const accentColors = getTailwindColors()[accentThemeKey];
            const isDark = document.documentElement.classList.contains('dark');
            
            loaderDiv.className = `loader !w-5 !h-5 !border-2 ${isDark ? 'border-loader-border-generic-dark' : 'border-loader-border-generic-light'} border-t-[${accentColors.loaderTop.DEFAULT}]`;
            connectWalletBtn.innerHTML = '';
            connectWalletBtn.appendChild(loaderDiv);

            try {
                await new Promise(resolve => setTimeout(resolve, 1500));
                const mockAddress = '0x' + Array(40).fill(0).map(() => Math.floor(Math.random() * 16).toString(16)).join('');
                addressInput.value = mockAddress;
                addressInput.focus();
            } catch (error) { console.error("Connect wallet failed:", error); alert("Failed to connect wallet. Please try again.");
            } finally { connectWalletBtn.disabled = false; connectWalletBtn.innerHTML = originalIcon; }
        });

        recheckButton.addEventListener('click', () => {
            addressInput.value = '';
            const accentThemeKey = APP_CONFIG.ACTIVE_ACCENT_THEME;
            const accentColors = getTailwindColors()[accentThemeKey];
            addressInput.classList.remove(`border-[${accentColors.error.DEFAULT}]`, `focus:ring-[${accentColors.error.DEFAULT}]`); 
            showState('query-state');
            addressInput.focus();
        });

        claimButton.addEventListener('click', () => {
            claimButton.disabled = true;
            const loaderDiv = document.createElement('div');
            loaderDiv.className = `loader !border-white/60 !border-t-white !w-6 !h-6 !border-2 mr-2.5`;
            claimButton.innerHTML = '';
            claimButton.appendChild(loaderDiv);
            const textSpan = document.createElement('span');
            textSpan.textContent = 'Processing...';
            claimButton.appendChild(textSpan);

            setTimeout(() => {
                claimButton.textContent = "Claimed";
                const accentThemeKey = APP_CONFIG.ACTIVE_ACCENT_THEME;
                const accentColors = getTailwindColors()[accentThemeKey];
                const isDark = document.documentElement.classList.contains('dark');
                
                claimButton.classList.remove(`bg-[${accentColors.success.DEFAULT}]`, `hover:opacity-90`);
                claimButton.style.color = ''; 
                
                claimButton.classList.add(isDark ? `bg-disabled-bg-dark` : `bg-disabled-bg-light`, 'cursor-not-allowed', 'opacity-70');
                claimButton.style.color = isDark ? getTailwindColors()['disabled-text'].dark : getTailwindColors()['disabled-text'].light; 
                alert('Airdrop claimed successfully! (Simulated)');
            }, 2000);
        });
        
        function simulateQuery(address) {
            showState('loading-state');
            setTimeout(() => {
                const isEligible = Math.random() > 0.5; 
                if (isEligible) {
                    const amount = (Math.random() * 1000 + 50).toFixed(2);
                    const price = (Math.random() * 0.5 + 0.1).toFixed(4);
                    APP_CONFIG.MOCK_ELIGIBLE_AMOUNT = amount;
                    APP_CONFIG.MOCK_USD_PRICE_PER_TOKEN = price;
                    if (claimAmountTokenEl) claimAmountTokenEl.textContent = `${amount} ${APP_CONFIG.CLAIM_COIN_SYMBOL}`;
                    if (claimAmountUsdEl) claimAmountUsdEl.textContent = `≈ $${(amount * price).toFixed(2)} USD`;
                    
                    claimButton.disabled = false;
                    claimButton.textContent = "Claim Now";
                    const accentThemeKey = APP_CONFIG.ACTIVE_ACCENT_THEME;
                    const accentColors = getTailwindColors()[accentThemeKey];
                    const isDark = document.documentElement.classList.contains('dark');

                    claimButton.classList.remove(isDark ? `bg-disabled-bg-dark` : `bg-disabled-bg-light`, 'cursor-not-allowed', 'opacity-70');
                    claimButton.style.color = ''; 
                    claimButton.classList.add(`bg-[${accentColors.success.DEFAULT}]`, `hover:opacity-90`);
                    claimButton.style.color = accentColors.success.textOn;

                    showState('success-state');
                } else {
                    showState('failure-state');
                }
            }, 2500);
        }

        const dragIndicator = modal.querySelector('.sm\\:block.md\\:hidden.pt-3.pb-2');
        if (dragIndicator) {
            let startY, initialModalHeight, currentTranslateY = 0;
            dragIndicator.addEventListener('touchstart', (e) => {
                if (e.touches.length !== 1) return;
                startY = e.touches[0].clientY;
                modal.style.transition = 'none'; 
                initialModalHeight = modal.offsetHeight;
                currentTranslateY = 0; 
            }, { passive: true });

            dragIndicator.addEventListener('touchmove', (e) => {
                if (e.touches.length !== 1 || typeof startY === 'undefined') return;
                const deltaY = e.touches[0].clientY - startY;
                if (deltaY > 0) { 
                    currentTranslateY = deltaY;
                    modal.style.transform = `translateY(${currentTranslateY}px)`;
                }
            }, { passive: true });

            dragIndicator.addEventListener('touchend', () => {
                if (typeof startY === 'undefined') return;
                modal.style.transition = 'transform 0.3s ease-out'; 
                if (currentTranslateY > initialModalHeight * 0.3) { 
                    hideAirdropModal(); 
                     setTimeout(() => {
                        modal.style.transform = 'translateY(100%)'; 
                        showState('query-state'); 
                        addressInput.value = '';
                        const accentThemeKey = APP_CONFIG.ACTIVE_ACCENT_THEME;
                        const accentColors = getTailwindColors()[accentThemeKey];
                        addressInput.classList.remove(`border-[${accentColors.error.DEFAULT}]`, `focus:ring-[${accentColors.error.DEFAULT}]`);
                    }, 300); 
                } else {
                    modal.style.transform = 'translateY(0)'; 
                }
                startY = undefined; 
            });
        }
        
        if (themeSwitcherControls) {
            themeSwitcherControls.addEventListener('click', (event) => {
                const button = event.target.closest('button');
                if (!button) return;

                if (button.id === 'toggle-dark-mode') {
                    document.documentElement.classList.toggle('dark');
                    applyAllStyles(); 
                     if (successStateEl.classList.contains('active')) createParticles();
                } else {
                    const theme = button.dataset.theme;
                    if (theme) {
                        applyAccentTheme(theme); 
                    }
                }
            });
        }
        
        // Helper function to convert hex to RGB for rgba usage
        function hexToRgb(hex) {
            let r = 0, g = 0, b = 0;
            if (hex.length == 4) { // #RGB
                r = parseInt(hex[1] + hex[1], 16);
                g = parseInt(hex[2] + hex[2], 16);
                b = parseInt(hex[3] + hex[3], 16);
            } else if (hex.length == 7) { // #RRGGBB
                r = parseInt(hex[1] + hex[2], 16);
                g = parseInt(hex[3] + hex[4], 16);
                b = parseInt(hex[5] + hex[6], 16);
            }
            return `${r},${g},${b}`;
        }

        // Helper function to lighten/darken a hex color
        function shadeColor(color, percent) {
            let R = parseInt(color.substring(1,3),16);
            let G = parseInt(color.substring(3,5),16);
            let B = parseInt(color.substring(5,7),16);

            R = parseInt(R * (100 + percent) / 100);
            G = parseInt(G * (100 + percent) / 100);
            B = parseInt(B * (100 + percent) / 100);

            R = (R<255)?R:255;  
            G = (G<255)?G:255;  
            B = (B<255)?B:255;  

            R = Math.round(R)
            G = Math.round(G)
            B = Math.round(B)

            const RR = ((R.toString(16).length==1)?"0"+R.toString(16):R.toString(16));
            const GG = ((G.toString(16).length==1)?"0"+G.toString(16):G.toString(16));
            const BB = ((B.toString(16).length==1)?"0"+B.toString(16):B.toString(16));

            return "#"+RR+GG+BB;
        }


        document.addEventListener('DOMContentLoaded', initializeApp);

        window.switchAppTheme = function(themeName) { 
            if (getTailwindColors()[themeName]) { 
                applyAccentTheme(themeName);
                console.log(`Accent theme switched to: ${themeName}`);
            } else {
                console.error(`Invalid accent theme name: ${themeName}.`);
            }
        }
        console.log("Dev Tip: Call window.switchAppTheme('theme-name') in console to change accent themes. Or use buttons at top-right.");

    </script>
</body>
</html>
